<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <g id="group_text_1">
      <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
      <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text>
    </g>
    <!-- Shows BBox in green -->
    <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect>
    <!-- Shows BoundingClientRect in red -->
    <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
  </svg>

  <script>
    var rectBBox = document.querySelector('#rect_1');
    var rectBoundingClientRect = document.querySelector('#rect_2');
    var groupElement = document.querySelector('#group_text_1');

    var bboxGroup = groupElement.getBBox();
    console.log(bboxGroup);
    rectBBox.setAttribute('x', bboxGroup.x);
    rectBBox.setAttribute('y', bboxGroup.y);
    rectBBox.setAttribute('width', bboxGroup.width);
    rectBBox.setAttribute('height', bboxGroup.height);

    var boundingClientRectGroup = groupElement.getBoundingClientRect();
    console.log(boundingClientRectGroup);
    rectBoundingClientRect.setAttribute('x', boundingClientRectGroup.x);
    rectBoundingClientRect.setAttribute('y', boundingClientRectGroup.y);
    rectBoundingClientRect.setAttribute('width', boundingClientRectGroup.width);
    rectBoundingClientRect.setAttribute('height', boundingClientRectGroup.height);
  </script>
</body>

</html>
